<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>TimePicker 时间选择框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app"><a-config-provider :locale="locale">
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">点击 TimePicker，然后可以在浮层中选择或者输入某一时间。</p>
	<p class="desc">valueFormat	可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象。</p>
	<a-space direction="vertical">
		<a-time-picker v-model:value="value1_1"></a-time-picker>
		<a-time-picker v-model:value="value1_2" value-format="HH:mm:ss"></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">范围选择器</a-divider><!-- =============================================================== -->
	<p class="desc">通过 TimeRangePicker 使用时间范围选择器。</p>
	<a-space direction="vertical">
		<a-time-range-picker v-model:value="value2_1"></a-time-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">附加内容</a-divider><!-- =============================================================== -->
	<p class="desc">在 TimePicker 选择框底部显示自定义的内容。【没搞懂prefixCls是个什么用的】</p>
	<a-space direction="vertical">
		<a-time-picker v-model:value="value3_1" v-model:open="open3_1" @open-Change="handleOpenChange3">
			<template #renderExtraFooter="{ prefixCls }">
				<a-button size="small" type="primary" @click="handleClose3">OK {{ prefixCls }}</a-button>
			</template>
		</a-time-picker>
		<a-time-picker v-model:value="value3_2" v-model:open="open3_2">
			<template #renderExtraFooter>
				<a-button size="small" type="primary" @click="handleClose3">OK</a-button>
			</template>
		</a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">选择时分</a-divider><!-- =============================================================== -->
	<p class="desc">TimePicker 浮层中的列会随着 format 变化，当略去 format 中的某部分时，浮层中对应的列也会消失。</p>
	<a-space>
		<a-time-picker v-model:value="value4_1" format="HH:mm"></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">三种大小</a-divider><!-- =============================================================== -->
	<p class="desc">三种大小的输入框，大的用在表单中，中的为默认。</p>
	<a-space direction="vertical">
		<a-time-picker v-model:value="value5_1" size="large"></a-time-picker>
		<a-time-picker v-model:value="value5_2"></a-time-picker>
		<a-time-picker v-model:value="value5_3" size="small"></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 DatePicker 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-time-picker status="error"></a-time-picker>
		<a-time-picker status="warning"></a-time-picker>
		<a-time-range-picker status="error"></a-time-range-picker>
		<a-time-range-picker status="warning"></a-time-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">无边框</a-divider><!-- =============================================================== -->
	<p class="desc">无边框样式。</p>
	<a-space direction="vertical">
		<a-time-picker :bordered="false"></a-time-picker>
		<a-time-range-picker :bordered="false"></a-time-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">12 小时制</a-divider><!-- =============================================================== -->
	<p class="desc">12 小时制的时间选择器，默认的 format 为 h:mm:ss a。</p>
	<a-space direction="vertical">
		<a-time-picker v-model:value="value8_1" use12-hours></a-time-picker>
		<a-time-picker v-model:value="value8_2" use12-hours format="h:mm:ss A" style="width: 140px"></a-time-picker>
		<a-time-picker v-model:value="value8_3" use12-hours format="h:mm a"></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">禁用</a-divider><!-- =============================================================== -->
	<p class="desc">禁用时间选择。</p>
	<a-space>
		<a-time-picker v-model:value="value9_1" disabled></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">步长选项</a-divider><!-- =============================================================== -->
	<p class="desc">可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。</p>
	<a-space>
		<a-time-picker v-model:value="value10_1" :hour-step="2" :minute-step="15" :second-step="10"></a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">后缀图标</a-divider><!-- =============================================================== -->
	<p class="desc">自定义输入框的后缀图标。</p>
	<a-space>
		<a-time-picker v-model:value="value11_1" :default-value="def_val11">
			<template #suffixIcon>
				<smile-outlined class="ant-icon"></smile-outlined>
			</template>
		</a-time-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">弹出位置</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 placement 手动指定弹出的位置。</p>
	<a-space direction="vertical" style="margin-left: 50px;">
		<a-radio-group v-model:value="placement12">
			<a-radio-button value="topLeft">topLeft</a-radio-button>
			<a-radio-button value="topRight">topRight</a-radio-button>
			<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
			<a-radio-button value="bottomRight">bottomRight</a-radio-button>
		</a-radio-group>
		<a-time-picker v-model:value="value12_1" :placement="placement12"></a-time-picker>
		<a-time-range-picker v-model:value="value12_2" :placement="placement12"></a-time-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">不可选择的时间</a-divider><!-- =============================================================== -->
	<p class="desc">disabled-time指定不可选择的时间</p>
	<p class="desc">hideDisabledOptions	隐藏禁止选择的选项</p>
	<p class="desc">第3个选择框演示了禁用选项的详细用法。</p>
	<p class="desc">第4个时间范围的选项，如果也想更详细的禁用，可以参考第3个选择框的写法：disabledTime13_2()。</p>
	<a-space direction="vertical">
		<a-time-picker v-model:value="value13_1" :disabled-time="disabledTime13_1"></a-time-picker>
		<a-time-picker v-model:value="value13_2" :disabled-time="disabledTime13_1" hide-Disabled-Options></a-time-picker>
		<a-time-picker v-model:value="value13_3" :disabled-time="disabledTime13_2"></a-time-picker>
		<a-time-range-picker v-model:value="value13_4" :disabled-time="disabledRangeTime13_1"></a-time-range-picker>
	</a-space>
	
	
	
</a-config-provider></div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		locale: localeValues,
		value1_1: dayjs('08:00:00', 'HH:mm:ss'),
		value1_2: '09:00:00',
		
		value2_1: [],
		
		value3_1: null,
		value3_2: dayjs(),
		open3_1: false,
		open3_2: true,
		
		value4_1: null,
		
		value5_1: null,
		value5_2: null,
		value5_3: null,
		
		value8_1: null,
		value8_2: null,
		value8_3: null,
		
		value9_1: dayjs('08:10:00', 'HH:mm:ss'),
		value10_1: null,
		
		value11_1: undefined,
		def_val11: dayjs('00:00:00', 'HH:mm:ss'),
		
		value12_1: null,
		value12_2: null,
		placement12: 'bottomLeft',
		
		value13_1: null,
		value13_2: null,
		value13_3: null,
		value13_4: null,
		
		
	}
},
methods:{
	handleOpenChange3(open){
		console.log('handleOpenChange3', open);
	},
	handleClose3(){
		console.log('handleClose3');
	},
	
	myRange(start, end){
		const result = [];
		for (let i = start; i < end; i++) {
			result.push(i);
		}
		return result;
	},
	disabledTime13_1(){
		return {
			disabledHours: () => this.myRange(0, 24).splice(4, 20),
			disabledMinutes: () => this.myRange(30, 60),
			disabledSeconds: () => [0, 5, 6],
		};
	},
	disabledTime13_2(){
		return {
			disabledHours: () => this.myRange(0, 24).splice(6, 2),
			disabledMinutes: (selectedHour)=>{
				//选择不同的小时，禁用不同的分钟
				if(selectedHour == 0){
					return this.myRange(10, 60);
				}else if(selectedHour == 1){
					return this.myRange(20, 60);
				}else if(selectedHour == 2){
					return this.myRange(30, 60);
				}else if(selectedHour == 3){
					return this.myRange(40, 60);
				}else{
					return this.myRange(50, 60);
				}
			},
			disabledSeconds: (selectedHour, selectedMinute)=>{
				// 选择了小时和分钟后，决定禁用哪些秒【逻辑目的：禁用个位数和时或分相同的秒集合】
				// console.log(selectedHour, selectedMinute);
				let h = selectedHour % 10;
				let m = selectedMinute % 10;
				let has = [h, m];
				let full = this.myRange(0, 60);
				let dis = full.filter((v, k)=>{
					var s = v % 10;
					if(has.includes(s)){
						return true;
					}
					return false;
				})
				console.log('禁用的秒：', dis);
				return dis;
			},
		};
	},
	disabledRangeTime13_1(date, type){
		if (type === 'start') {
			return {
				disabledHours: () => this.myRange(0, 60).splice(4, 20),
				disabledMinutes: () => this.myRange(30, 60),
				disabledSeconds: () => [1, 2, 3,],
			};
		}
		return {
			disabledHours: () => this.myRange(0, 60).splice(20, 4),
			disabledMinutes: () => this.myRange(0, 31),
			disabledSeconds: () => [4, 5, 6],
		};
	},
	
},
watch: {
	value1_1: function(val){
		console.log('value1_1', val);
	},
	value1_2: function(val){
		console.log('value1_2', val);
	},
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
